<template>
  <a-drawer
      title="详细信息"
      placement="right"
      :visible="props.visible"
      width="75%"
      class="base-drawer"
      style="background:rgba(237,237,237,0)"
  >
    {{props.record}}
  </a-drawer>
</template>

<script setup lang="ts">

import {Drawer} from "ant-design-vue";
const ADrawer = Drawer;
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
  },
  record: {
    type: Object,
    default: null,
  },
});

</script>

<style scoped>
</style>
<style>
.base-drawer {
  .ant-drawer-wrapper-body {
    .ant-drawer-header {
      background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%) !important;
      padding: 0;
      .ant-drawer-header-title .ant-drawer-title {
        color: white;
      }
    }
    .ant-drawer-header::before {
      content: '';
      position: absolute;
      top: -5%;
      left: 0;
      right: 0;
      bottom: 0;
      background: url("/akitorSys.svg");
      background-size: 100% 120%;
      opacity: 0.3;
    }
    .ant-drawer-body {
      background: linear-gradient(135deg, rgba(28, 32, 46, 0.95) 0%, #1e293b 100%) !important;
      color: white;
    }
  }
}
</style>
